import { defineStore } from "pinia";
import { useDark, useToggle } from "@vueuse/core";
import { useTabStore } from "..";

// pinia setup 语法
export const useAppStore = defineStore("appStore", () => {
  const isDark = useDark();

  const reloadFlag = ref(true);

  const reloadComponentName = ref("");

  const menuCollapse = ref(false);

  const contentFull = ref(false);

  // 切换主题
  const switchTheme = () => {
    useToggle(isDark)();
  };

  // 刷新页面
  const reloadPage = async () => {
    const { activeTab } = useTabStore();
    reloadComponentName.value = activeTab.meta.componentName || "";
    console.log("刷新页面：", reloadComponentName.value);

    reloadFlag.value = false;
    window.$loadingBar.start();

    await nextTick();
    reloadFlag.value = true;
    reloadComponentName.value = "";
    setTimeout(() => {
      document.documentElement.scrollTo({ left: 0, top: 0 });
      window.$loadingBar.finish();
    }, 100);
  };

  // 收起/打开侧边菜单
  const switchCollapse = () => {
    menuCollapse.value = !menuCollapse.value;
  };

  // 设置主题内容全屏
  const setContentFull = (flag: boolean) => {
    contentFull.value = flag;
  };

  return {
    isDark,
    reloadFlag,
    menuCollapse,
    contentFull,
    reloadComponentName,
    switchTheme,
    reloadPage,
    switchCollapse,
    setContentFull,
  };
});
